<script setup lang='ts'>
import { defaData } from "./strstate.ts"
import { ElMessage, FormInstance } from "element-plus";
// import { throttle } from "@/utils/public/method.ts";
import { ref, reactive, computed, onMounted, watch, nextTick, watchEffect, onBeforeUnmount } from "vue";
import * as echarts from 'echarts';
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useRoute } from "vue-router";
import { emitter } from "@/utils/mitt";
import qs from 'qs'
import {
  SecuritiesMyStrategyGetStrategy,
  SecuritiesMyStrategyGetAllTrans,
  SecuritiesMyStrategyAddPolicy,
  SecuritiesMyStrategyStockBackTest,
  SecuritiesMyStrategyFutureskBackTest,
  SecuritiesMyStrategyGetStockPoolMaxTime,
  SecuritiesMyStrategyGetStockSelectionData,
  SecuritiesMyStrategyGetFutureslectionData,
  SecuritiesMyStrategySearchAndUpdateStrategy,
} from "@/api/stu/Cecurity";
import EditPen from "@iconify-icons/ep/edit-pen";
const route = useRoute();
const SeleteType = ref(0);
const BtnStates = ref(0);
const tabIndex = ref(0),
  strategyNames = ref(""),
  stockMarket = ref(""),
  bMoney = ref(10000),
  bRate = ref("0"),
  time = reactive({
    Begin: "",
    BeginTime: "",
    End: "",
    EndTime: ""
  }),
  panels = reactive({
    1: {
      show: true,
      err: false,
    },
    2: {
      show: false,
      err: false,
    },
    3: {
      show: false,
      err: false,
    },
    4: {
      show: false,
      err: false,
    },
    5: {
      show: false,
      err: false,
    },
  }),
  showTitleInfo = reactive({
    ids: '',
    name: '',
    show: false,
    text: ''
  }),
  showPoup = reactive({
    show: false,
    title: "",
    dataName: "",
  }),
  showPoup2 = reactive({
    show: false,
    text: "",
    index: "",  //
    type: "",
    dataName: "",
    disable: true,
    n1: "",
    n2: "",
    n3: "",
  }),
  Compare = reactive({
    1: [
      { "name": "大于", "value": "gt" }, //gt
      { "name": "小于", "value": "lt" }, //lt
      { "name": "等于", "value": "eq" }, //eq
      { "name": "大于等于", "value": "ge" }, //ge
      { "name": "小于等于", "value": "le" }, //le
    ],
    2: [
      { "name": "大于", "value": 1 },
      { "name": "小于", "value": 2 },
      { "name": "区间", "value": 3 },
      { "name": "小于N日均值", "value": 4 },
      { "name": "大于N日均值", "value": 5 },
      { "name": "介于N1、N2均值之间", "value": 6 },
    ],
    3: [
      { "name": "大于", "value": 1 },
      { "name": "小于", "value": 2 },
      { "name": "区间", "value": 3 },
    ],
    4: [
      { "name": "大于", "value": 1 },
      { "name": "小于", "value": 2 },
      { "name": "区间", "value": 3 },
      { "name": "空头", "value": 7 },
      { "name": "多头", "value": 8 },
      { "name": "金叉", "value": 9 },
      { "name": "死叉", "value": 10 },
    ],
    5: [
      { "name": "空头", "value": 7 },
      { "name": "多头", "value": 8 },
      { "name": "金叉", "value": 9 },
      { "name": "死叉", "value": 10 },
    ],
    6: [
      { "name": "空头", "value": 7 },
      { "name": "多头", "value": 8 },
      { "name": "金叉", "value": 9 },
      { "name": "死叉", "value": 10 },
      { "name": "买入信号", "value": 11 },
      { "name": "卖出信号", "value": 12 },
    ]
  }),
  defaultData = reactive({
    xuanguData: [
      {
        label: { "name": "行情指标", "title": "行情指标" },
        item: [
          {
            label: { "name": "股票价格", "title": "" },
            item: [
              { "name": "开盘价", "title": "开盘价", "suffix": "元", enable: true, cType: 1 },
              { "name": "收盘价", "title": "收盘价", "suffix": "元", enable: true, cType: 1 },
              { "name": "最高价", "title": "最高价", "suffix": "元", enable: true, cType: 1 },
              { "name": "最低价", "title": "最低价", "suffix": "元", enable: true, cType: 1 },
            ]
          }, {
            label: { "name": "成交额", "title": "" },
            item: [
              { "name": "当日成交额", "title": "当日成交额", "suffix": "亿元", enable: true, cType: 1 },
              { "name": "5日平均成交额", "title": "5日平均成交额", "suffix": "亿元", enable: true, cType: 1 },
              { "name": "20日平均成交额", "title": "20日平均成交额", "suffix": "亿元", enable: true, cType: 1 },
            ]
          }, {
            label: { "name": "成交量", "title": "" },
            item: [
              { "name": "当日成交量", "title": "当日成交量", "suffix": "万手", enable: true, cType: 1 },
              { "name": "5日平均成交量", "title": "5日平均成交量", "suffix": "万手", enable: true, cType: 1 },
              { "name": "20日平均成交量", "title": "20日平均成交量", "suffix": "万手", enable: true, cType: 1 },
            ]
          }, {
            label: { "name": "股价涨幅", "title": "" },
            item: [
              { "name": "当日涨跌幅", "title": "当日涨跌幅", "suffix": "%", enable: true, cType: 1 },
              { "name": "5日平均涨跌幅", "title": "5日平均涨跌幅", "suffix": "%", enable: true, cType: 1 },
              { "name": "20日平均涨跌幅", "title": "20日平均涨跌幅", "suffix": "%", enable: true, cType: 1 },
            ]
          }, {
            label: { "name": "市值", "title": "" },
            item: [
              { "name": "总市值", "title": "总市值", "suffix": "亿元", enable: true, cType: 1 },
              { "name": "流通市值", "title": "流通市值", "suffix": "亿元", enable: true, cType: 1 },
            ]
          }, {
            label: { "name": "换手率", "title": "" },
            item: [
              { "name": "换手率", "title": "换手率", "suffix": "%", enable: true, cType: 1 },

            ]
          }
        ]
      },
      {
        label: { "name": "财务指标", "title": "财务指标" },
        item: [
          {
            label: { "name": "每股指标", "title": "每股指标" },
            item: [
              { "name": "基本每股收益", "title": "基本每股收益", "suffix": "元", enable: true, cType: 1 },
              { "name": "稀释每股收益", "title": "稀释每股收益", "suffix": "元", enable: true, cType: 1 },
              { "name": "每股净资产", "title": "每股净资产", "suffix": "元", enable: true, cType: 1 },
              { "name": "每股东权益不含少数股东权益", "title": "每股东权益不含少数股东权益", "suffix": "万元", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "盈利能力", "title": "盈利能力" },
            item: [
              { "name": "总资产利润率", "title": "总资产利润率", "suffix": "%", enable: true, cType: 1 },
              { "name": "主营业务利润率", "title": "主营业务利润率", "suffix": "%", enable: true, cType: 1 },
              { "name": "总资产净利润率", "title": "总资产净利润率", "suffix": "%", enable: true, cType: 1 },
              { "name": "成本费用利润率", "title": "成本费用利润率", "suffix": "%", enable: true, cType: 1 },
              { "name": "营业利润率", "title": "营业利润率", "suffix": "%", enable: true, cType: 1 },
              { "name": "主营业务成本率", "title": "主营业务成本率", "suffix": "%", enable: true, cType: 1 },
              { "name": "销售净利率", "title": "销售净利率", "suffix": "%", enable: true, cType: 1 },
              { "name": "净资产收益率", "title": "净资产收益率", "suffix": "%", enable: true, cType: 1 },
              { "name": "股本报酬率", "title": "股本报酬率", "suffix": "%", enable: true, cType: 1 },
              { "name": "销售毛利率", "title": "销售毛利率", "suffix": "%", enable: true, cType: 1 },
              { "name": "三项费用比重", "title": "三项费用比重", "suffix": "%", enable: true, cType: 1 },
              { "name": "非主营比重", "title": "非主营比重", "suffix": "%", enable: true, cType: 1 },
              { "name": "主营利润比重", "title": "主营利润比重", "suffix": "%", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "偿还能力", "title": "偿还能力" },
            item: [
              { "name": "流动比率", "title": "流动比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "速动比率", "title": "速动比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "现金比率", "title": "现金比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "利息支付倍数", "title": "利息支付倍数", "suffix": "%", enable: true, cType: 1 },
              { "name": "资产负债率", "title": "资产负债率", "suffix": "%", enable: true, cType: 1 },
              { "name": "长期债务与营运资金比率", "title": "长期债务与营运资金比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "股东权益比率", "title": "股东权益比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "长期负债比率", "title": "长期负债比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "负债与所有者权益比率", "title": "负债与所有者权益比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "固定资产净值率", "title": "固定资产净值率", "suffix": "%", enable: true, cType: 1 },
              { "name": "资本化比率", "title": "资本化比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "资本固定化比率", "title": "资本固定化比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "产权比率", "title": "产权比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "清算价值比率", "title": "清算价值比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "固定资产比重", "title": "固定资产比重", "suffix": "%", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "成长能力", "title": "成长能力" },
            item: [
              { "name": "主营业务收入增长率", "title": "主营业务收入增长率", "suffix": "%", enable: true, cType: 1 },
              { "name": "净利润增长率", "title": "净利润增长率", "suffix": "%", enable: true, cType: 1 },
              { "name": "净资产增长率", "title": "净资产增长率", "suffix": "%", enable: true, cType: 1 },
              { "name": "总资产增长率", "title": "总资产增长率", "suffix": "%", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "营运能力", "title": "营运能力" },
            item: [
              { "name": "应收账款周转天数", "title": "应收账款周转天数", "suffix": "天", enable: true, cType: 1 },
              { "name": "固定资产周转率", "title": "固定资产周转率", "suffix": "%", enable: true, cType: 1 },
              { "name": "存货周转天数", "title": "存货周转天数", "suffix": "天", enable: true, cType: 1 },
              { "name": "总资产周转天数", "title": "总资产周转天数", "suffix": "天", enable: true, cType: 1 },
              { "name": "流动资产周转天数", "title": "流动资产周转天数", "suffix": "天", enable: true, cType: 1 },
              { "name": "经营现金净流量对销售收入比率", "title": "经营现金净流量对销售收入比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "资产的经营现金流量回报率", "title": "资产的经营现金流量回报率", "suffix": "%", enable: true, cType: 1 },
              { "name": "经营现金净流量与净资产比率", "title": "经营现金净流量与净资产比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "经营现金净流量对负债比率", "title": "经营现金净流量对负债比率", "suffix": "%", enable: true, cType: 1 },
              { "name": "现金流量比率", "title": "现金流量比率", "suffix": "%", enable: true, cType: 1 },
            ]
          },
        ]
      },
      {
        label: { "name": "财报条目", "title": "财报条目" },
        item: [
          {
            label: { "name": "营业收入", "title": "营业收入" },
            item: [
              { "name": "营业总收入", "title": "营业总收入", "suffix": "万元", enable: true, cType: 1 },
              { "name": "营业收入", "title": "营业收入", "suffix": "万元", enable: true, cType: 1 },
              { "name": "利息收入", "title": "利息收入", "suffix": "万元", enable: true, cType: 1 },
              { "name": "已赚保费", "title": "已赚保费", "suffix": "万元", enable: true, cType: 1 },
              { "name": "手续费及佣金收入", "title": "手续费及佣金收入", "suffix": "万元", enable: true, cType: 1 },
              { "name": "房地产销售收入", "title": "房地产销售收入", "suffix": "万元", enable: true, cType: 1 },
              { "name": "其他业务收入", "title": "其他业务收入", "suffix": "万元", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "营业成本", "title": "营业成本" },
            item: [
              { "name": "营业总成本", "title": "营业总成本", "suffix": "万元", enable: true, cType: 1 },
              { "name": "营业成本", "title": "营业成本", "suffix": "万元", enable: true, cType: 1 },
              { "name": "利息支出", "title": "利息支出", "suffix": "万元", enable: true, cType: 1 },
              { "name": "手续费及佣金支出", "title": "手续费及佣金支出", "suffix": "万元", enable: true, cType: 1 },
              { "name": "房地产销售成本", "title": "房地产销售成本", "suffix": "万元", enable: true, cType: 1 },
              { "name": "研发费用", "title": "研发费用", "suffix": "万元", enable: true, cType: 1 },
              { "name": "退保金", "title": "退保金", "suffix": "万元", enable: true, cType: 1 },
              { "name": "赔付支付净额", "title": "赔付支付净额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "提取保险合同准备金净额", "title": "提取保险合同准备金净额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "保单红利支出", "title": "保单红利支出", "suffix": "万元", enable: true, cType: 1 },
              { "name": "分保费用", "title": "分保费用", "suffix": "万元", enable: true, cType: 1 },
              { "name": "其他业务成本", "title": "其他业务成本", "suffix": "万元", enable: true, cType: 1 },
              { "name": "营业税加及附加", "title": "营业税加及附加", "suffix": "万元", enable: true, cType: 1 },
              { "name": "销售费用", "title": "销售费用", "suffix": "万元", enable: true, cType: 1 },
              { "name": "管理费用", "title": "管理费用", "suffix": "万元", enable: true, cType: 1 },
              { "name": "财务费用", "title": "财务费用", "suffix": "万元", enable: true, cType: 1 },
              { "name": "资产减值损失", "title": "资产减值损失", "suffix": "万元", enable: true, cType: 1 },
              { "name": "公允价值变动损益", "title": "公允价值变动损益", "suffix": "万元", enable: true, cType: 1 },


            ]
          },
          {
            label: { "name": "营业利润", "title": "营业利润" },
            item: [
              { "name": "利润总额", "title": "利润总额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "营业利润", "title": "营业利润", "suffix": "万元", enable: true, cType: 1 },
              { "name": "营业外收入", "title": "营业外收入", "suffix": "万元", enable: true, cType: 1 },
              { "name": "营业外支出", "title": "营业外支出", "suffix": "万元", enable: true, cType: 1 },
              { "name": "非流动资产处置损失", "title": "非流动资产处置损失", "suffix": "万元", enable: true, cType: 1 },
              { "name": "所得税收入", "title": "所得税收入", "suffix": "万元", enable: true, cType: 1 },
              { "name": "未确认投资损失", "title": "未确认投资损失", "suffix": "万元", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "净利润", "title": "净利润" },
            item: [
              { "name": "归属于母公司所有者的净利润", "title": "归属于母公司所有者的净利润", "suffix": "万元", enable: true, cType: 1 },
              { "name": "被合并方在合并前实现净利润", "title": "被合并方在合并前实现净利润", "suffix": "万元", enable: true, cType: 1 },
              { "name": "少数股东损失", "title": "少数股东损失", "suffix": "万元", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "资产", "title": "资产" },
            item: [
              { "name": "货币资金", "title": "货币资金", "suffix": "万元", enable: true, cType: 1 },
              { "name": "应收账款", "title": "应收账款", "suffix": "万元", enable: true, cType: 1 },
              { "name": "存货", "title": "存货", "suffix": "万元", enable: true, cType: 1 },
              { "name": "流动资产合计", "title": "流动资产合计", "suffix": "万元", enable: true, cType: 1 },
              { "name": "固定资产净额", "title": "固定资产净额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "资产总计", "title": "资产总计", "suffix": "万元", enable: true, cType: 1 },
              { "name": "流动负债合计", "title": "流动负债合计", "suffix": "万元", enable: true, cType: 1 },
              { "name": "所有者权益（或股东权益）合计", "title": "所有者权益（或股东权益）合计", "suffix": "万元", enable: true, cType: 1 },
            ]
          },
          {
            label: { "name": "现金流", "title": "现金流" },
            item: [
              { "name": "期初现金及现金等价物余额", "title": "期初现金及现金等价物余额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "经营活动产生的现金流净额", "title": "经营活动产生的现金流净额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "投资活动产生的现金流净额", "title": "投资活动产生的现金流净额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "筹资活动产生的现金流净额", "title": "筹资活动产生的现金流净额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "现金及现金等价物净增加额", "title": "现金及现金等价物净增加额", "suffix": "万元", enable: true, cType: 1 },
              { "name": "期末现金及现金等价物余额", "title": "期末现金及现金等价物余额", "suffix": "万元", enable: true, cType: 1 },
            ]
          },
        ]
      }
    ],
    mairuData: [
      {
        label: { "name": "买入设置", "title": "买入设置" },
        item: [
          {
            label: { "name": "行情指标", "title": "行情指标" },
            item: [
              { "name": "昨日开盘价", "title": "昨日开盘价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日收盘价", "title": "昨日收盘价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日最高价", "title": "昨日最高价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日最低价", "title": "昨日最低价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日成交量", "title": "昨日成交量", "suffix": "股", enable: true, cType: 2 },
              { "name": "昨日成交额", "title": "昨日成交额", "suffix": "万元", enable: true, cType: 2 },
              { "name": "昨日日均价", "title": "昨日日均价", "suffix": "元", enable: true, cType: 2 },
              { "name": "N日涨幅", "title": "N日涨幅", "suffix": "%", enable: true, edit: true, cType: 3 },
            ]
          }, {
            label: { "name": "技术指标", "title": "技术指标" },
            item: [
              { "name": "MA", "title": "MA，移动平均线，它是将某一段时间（默认5日）的收盘价之和除以该周期", "suffix": "", enable: true, edit: true, cType: 4 },
              { "name": "DIF", "title": "由快的指数移动平均线减去慢的指数移动平均线得到", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "DEA", "title": "DIF的N日指数平漫移动平均线", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "HISF", "title": "HISF=（2x （DIF-DEA）", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "MACD", "title": "指数平滑移动平均线", "suffix": "", enable: true, edit: true, cType: 5 },
              { "name": "KDJ", "title": "KDJ指标又叫随机指标，它主要是利用价格波动的真实波幅来反映价格走势的强弱和超买超卖现象", "suffix": "", enable: true, edit: true, cType: 6 },
              { "name": "KDJ_K", "title": "KDJ_K,KDJ的K值", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "KDJ_D", "title": "KDJ_D,KDJ的D值", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "KDJ_J", "title": "KDJ_J,KDJ的J值", "suffix": "", enable: true, edit: true, cType: 3 },

              { "name": "布林上线", "title": "中轨线=N日的移动平均线上轨线=中轨线+两倍的标准差", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "布林下线", "title": "中轨线=N日的移动平均线下轨线=中轨线－两倍的标准差", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "N日平均成交额", "title": "将某一段时间（默认5日）的成交量之和除以该周期", "suffix": "万元", enable: true, edit: true, cType: 4 },
              { "name": "N日平均成交量", "title": "将某一段时间（默认5日）的成交额之和除以该周期", "suffix": "股", enable: true, edit: true, cType: 4 },

            ]
          }
        ]
      },
    ],
    maichuData: [
      {
        label: { "name": "卖出设置", "title": "卖出设置" },
        item: [
          {
            label: { "name": "行情指标", "title": "行情指标" },
            item: [
              { "name": "昨日开盘价", "title": "昨日开盘价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日收盘价", "title": "昨日收盘价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日最高价", "title": "昨日最高价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日最低价", "title": "昨日最低价", "suffix": "元", enable: true, cType: 2 },
              { "name": "昨日成交量", "title": "昨日成交量", "suffix": "股", enable: true, cType: 2 },
              { "name": "昨日成交额", "title": "昨日成交额", "suffix": "万元", enable: true, cType: 2 },
              { "name": "昨日日均价", "title": "昨日日均价", "suffix": "元", enable: true, cType: 2 },
              { "name": "N日涨幅", "title": "N日涨幅", "suffix": "%", enable: true, edit: true, cType: 3 },
            ]
          }, {
            label: { "name": "技术指标", "title": "技术指标" },
            item: [
              { "name": "MA", "title": "MA，移动平均线，它是将某一段时间（默认5日）的收盘价之和除以该周期", "suffix": "", enable: true, edit: true, cType: 4 },
              { "name": "DIF", "title": "由快的指数移动平均线减去慢的指数移动平均线得到", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "DEA", "title": "DIF的N日指数平漫移动平均线", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "HISF", "title": "HISF=（2x （DIF-DEA）", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "MACD", "title": "指数平滑移动平均线", "suffix": "", enable: true, edit: true, cType: 5 },
              { "name": "KDJ", "title": "KDJ指标又叫随机指标，它主要是利用价格波动的真实波幅来反映价格走势的强弱和超买超卖现象", "suffix": "", enable: true, edit: true, cType: 6 },
              { "name": "KDJ_K", "title": "KDJ_K,KDJ的K值", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "KDJ_D", "title": "KDJ_D,KDJ的D值", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "KDJ_J", "title": "KDJ_J,KDJ的J值", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "布林上线", "title": "中轨线=N日的移动平均线上轨线=中轨线+两倍的标准差", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "布林下线", "title": "中轨线=N日的移动平均线下轨线=中轨线－两倍的标准差", "suffix": "", enable: true, edit: true, cType: 3 },
              { "name": "N日平均成交额", "title": "将某一段时间（默认5日）的成交量之和除以该周期", "suffix": "万元", enable: true, edit: true, cType: 4 },
              { "name": "N日平均成交量", "title": "将某一段时间（默认5日）的成交额之和除以该周期", "suffix": "股", enable: true, edit: true, cType: 4 },

            ]
          }
        ]
      },
    ],
    fengxianData: [
      {
        label: { "name": "风险指标", "title": "风险指标" },
        item: [
          {
            label: { "name": "风险指标", "title": "风险指标" },
            item: [
              { "name": "个股止盈", "title": "当个股盈利超过止盈线，则清仓止盈", "suffix": "%", enable: true, cType: 0 },
              { "name": "个股止损", "title": "当个股亏损超过止损线，则清仓止损", "suffix": "%", enable: true, cType: 0 },
              { "name": "策略最大亏损", "title": "当策略总亏损超过设定的止损线，则策略清仓止损，并停止交易", "suffix": "%", enable: true, cType: 0 },
              { "name": "策略最大盈利", "title": "当策略总盈利超过设定的止盈线，则策略清仓止盈，并停止交易", "suffix": "%", enable: true, cType: 0 },
            ]
          }
        ]
      }
    ],
    gupiaoData: []
  }),
  endData = reactive({
    xuangu: [],
    mairu: [],
    maichu: [],
    fengxian: [],
    gupiao: []
  }),
  hcData = reactive({
    aData: {
      qczj: '',   //期初资金
      zzc: '',    //总资产
      ljyk: '',   //累计盈亏
      ljsxf: '',  //累计手续费
      cysy: '',   //累计收益率
      nhsy: '',   //年化收益率
      zdhc: '',   //最大回撤率
      pccs: '',   //平仓次数
      kccs: '',   //开仓次数
      ccje: '',   //持仓市值
    }
  }),
  tableData = ref(),
  StrategyId = ref("");//保存后返回的ID

// const IDinText = document.getElementById("IDinText");

function formatTime(num = new Date().getTime(), format = "YYYY-mm-dd HH:MM:SS") {
  let ret, date, renum;
  // 处理时间戳，js一般获取的时间戳是13位，PHP一般是10位,根据实际情况做判断处理
  if (num.toString().length == 10) {
    date = new Date(parseInt(num) * 1000);
  } else if (num.toString().length == 13) {
    date = new Date(parseInt(num));
  } else {
    date = new Date(parseInt(num));
  }
  const opt = {
    "Y+": date.getFullYear().toString(), // 年
    "m+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "M+": date.getMinutes().toString(), // 分
    "S+": date.getSeconds().toString() // 秒
    // 目前用的是这六种符号,有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (var k in opt) {
    ret = new RegExp("(" + k + ")").exec(format);
    if (ret) {
      renum = (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")) //根据复数前面是否补零,如“mm”补零，单“m”前面不补零
      format = format.replace(ret[1], renum)
    };
  };
  return format;
};
// 左侧面板打开
function openPanel(param) {
  panels[param].show = !panels[param].show;
  panels[param].err = false;
}

function toggleTab(e) {
  tabIndex.value = e;
}

// a, b, c为下标
function btnChoose(e, a, b, c, name) {
  // console.log(e, a, b, c, name);
  // var ix = "";
  if (name == "xuanguData") {
    panels[1].show = true
    panels[1].err = false;
  } else if (name == "mairuData") {
    panels[2].show = true
    panels[2].err = false;
  } else if (name == "maichuData") {
    panels[3].show = true
    panels[3].err = false;
  } else if (name == "fengxianData") {
    panels[4].show = true
    panels[4].err = false;
  } else if (name == "gupiaoData") {
    panels[5].show = true
    panels[5].err = false;
  } else {
    throw "无效name:" + name;
    // return false;
  }

  let datx = getEndName(name);
  let datxDefault = defaultData[name];

  if (name == "mairuData" || name == "maichuData") {
    let datMairu = getEndName("mairuData");
    let datMaichu = getEndName("maichuData");

    if (datMairu.length + datMaichu.length == 10) {
      ElMessage.warning("买入和卖出最多只能选择10个");
      return false;
    }
  }
  // console.log(datx);
  if (e.enable == false) {
    ElMessage.warning("该指标已存在！");
    return false;
  } else if (datx.length < 10) {
    // console.log(xuangu);
    datxDefault[a].item[b].item[c].enable = false;
    let cType = datxDefault[a].item[b].item[c].cType;
    // console.log(cType);
    let selectVal = "";
    if (cType != 0) {
      selectVal = Compare[cType][0].value;
    }
    let ids = a + "-" + b + "-" + c;
    focusOn(ids, e.title, name);   //设置tr选中状态
    // console.log(e.name);
    let n1: any = null, n2: any = null, n3: any = null;

    if (e.name == "N日涨幅") {
      n1 = 5;
      showPoup2.disable = false;
    } else {
      showPoup2.disable = true;
    }
    if (e.name == 'MA' || e.name == 'N日平均成交额' || e.name == 'N日平均成交量') {
      n1 = 5;
      n2 = 10;
    } else if (e.name == 'DIF' || e.name == 'DEA' || e.name == 'HISF' || e.name == 'MACD') {
      n1 = 12;
      n2 = 26;
      n3 = 9;
    } else if (e.name == 'KDJ' || e.name == 'KDJ_K' || e.name == 'KDJ_D' || e.name == 'KDJ_J') {
      n1 = 9;
      n2 = 3;
      n3 = 3;
    } else if (e.name == '布林上线' || e.name == '布林下线') {
      n1 = 5;
      n2 = 2;
      n3 = 2;
    }

    var item = {
      ids: ids,
      name: e.name,
      title: e.title,
      enable: e.enable,
      cType: e.cType,
      suffix: e.suffix,
      edit: e.edit ? e.edit : false,
      rather: selectVal,
      value: "",
      value2: "",
      n1: n1,
      n2: n2,
      n3: n3,
    };
    // console.log(item);
    datx.push(item);
  } else {
    ElMessage.warning("最多只能选择10个");
    return false;
  }
}

// 移除已选中项
function removeChoose(e, a, name) {
  // console.log(e);
  let datx = getEndName(name);
  let datxDefault = defaultData[name];
  if (name == 'gupiaoData') {
    // console.log(datx);
    //console.log(endData.gupiao);
    // console.log(datxDefault);
    datxDefault[e.ids].isCheck = false;
    datx.splice(a, 1);
  } else {
    let arr = e.ids.split('-');
    datxDefault[arr[0]].item[arr[1]].item[arr[2]].enable = true;
    datx.splice(a, 1);
  }

}

//打开弹窗1
function openPoup(name, title) {

  // if (showPoup.dataName != name) {
  // }
  if (name == "gupiaoData") {
    endData.mairu.forEach((item, i) => {
      noValue(item);
    })
    endData.maichu.forEach((item, i) => {
      noValue(item);
    })
    endData.xuangu.forEach((item, i) => {
      noValue(item);
    })
    endData.fengxian.forEach((item, i) => {
      noValue(item);
    })
    if (stockMarket.value == "") {
      ElMessage.warning("请选择交易所！");
      return;
    };
    if (!endData.xuangu.length) {
      ElMessage.warning("请添加选股条件!");
      return;
    }
    endData.gupiao = []
    SelectStock();
  }

  tabIndex.value = 0;
  showPoup.dataName = name;
  showPoup.title = title;
  showPoup.show = true;

}

// 获取股票数据列表
async function SelectStock() {
  const Market = stockMarket.value.map(item => `${item}`).join(',')
  const data = qs.stringify({
    stockMarket: Market,
    stockPickingCondition: JSON.stringify(endData.xuangu)
  });
  let res = null;
  if (SeleteType.value) {
    res = await SecuritiesMyStrategyGetFutureslectionData(data)
  } else {
    res = await SecuritiesMyStrategyGetStockSelectionData(data);
  }
  // console.log("Stock", res)
  if (res.success) {
    defaultData.gupiaoData = res.data.data
  } else {
    ElMessage.error(res.msg)
  }
}

//关闭弹窗1
function closePoup() {
  showPoup.show = false;
  showPoup.dataName = '';
}

function openPoup2(obj, index, name, type) {
  showPoup2.text = obj.name;
  showPoup2.index = index;
  showPoup2.type = type;
  showPoup2.dataName = name;
  showPoup2.n1 = obj.n1;
  showPoup2.n2 = obj.n2;
  showPoup2.n3 = obj.n3;
  showPoup2.show = true;
}

//关闭弹窗2
function closePoup2(e) {
  let poup = showPoup2;
  if (e) {  //改变值
    // console.log(showPoup2);
    let datx = getEndName(poup.dataName);
    // let datxDefault = defaultData[name];
    // console.log(datx);
    datx[poup.index].n1 = poup.n1;
    datx[poup.index].n2 = poup.n2;
    datx[poup.index].n3 = poup.n3;
  }
  clearPoup2();  //清除数据
  showPoup2.show = false;
}
//清除弹窗2数据
function clearPoup2() {
  showPoup2.text = '';
  showPoup2.index = '';
  showPoup2.type = '';
  showPoup2.dataName = '';
  showPoup2.n1 = '';
  showPoup2.n2 = '';
  showPoup2.n3 = '';
};


function selectChange(e, a, name) {
  let datx = getEndName(name);
  let datxDefault = defaultData[name];
  // console.log(datx);
  // console.log(e);
  var selVal = e.rather;
  var arr = e.ids.split('-');
  var nowDef = datxDefault[arr[0]].item[arr[1]].item[arr[2]];
  if (e.cType == 2) {
    if (selVal == 4 || selVal == 5 || selVal == 6) {
      datx[a].suffix = "日"
    } else {
      datx[a].suffix = nowDef.suffix
      datx[a].value2 = ""
    }
  } else if (e.cType == 3) {
    // if (selVal == 4 || selVal == 5 || selVal == 6) {
    //     datx[a].suffix = "日"
    // } else {
    //     datx[a].suffix = "元"
    // }
  }
};

// 表格tr选中时
function focusOn(ids, title, name) {
  showTitleInfo.text = title;
  showTitleInfo.name = name;
  showTitleInfo.ids = ids;
}

//点击input框多选
function inputCheck(event, obj, a) {
  // console.log("inputCheck-多选", obj);
  let gupiaoArr = endData.gupiao;
  if (obj.isCheck) {    //已选中,删除该条记录
    //console.log(a);
    gupiaoArr.forEach((item: any, i) => {
      if (item.ids == a) {
        gupiaoArr.splice(i, 1);
      }
    })
  } else {  //未选中,添加值endData里面
    if (gupiaoArr.length < 5) {
      var item = {
        ids: a,
        name: obj.stockName,
        code: obj.stockCode,
        market: obj.stockMarket,
        value: ''
      }
      gupiaoArr.push(item);
    } else {
      event.preventDefault();
      ElMessage.warning("最多可选择5支股票！");
      return false;
    }
  }
}


function trCheck(event, obj, a) {
  let gupiaoArr = endData.gupiao;
  if (obj.isCheck) {    //已选中,删除该条记录
    //console.log(a);
    gupiaoArr.forEach((item, i) => {
      if (item.ids == a) {
        gupiaoArr.splice(i, 1);
      }
    })

  } else {  //未选中,添加值endData里面
    if (gupiaoArr.length < 5) {
      var item = {
        ids: a,
        name: obj.stockName,
        code: obj.stockCode,
        market: obj.stockMarket,
        value: ''
      }
      gupiaoArr.push(item);
    } else {
      event.preventDefault();
      ElMessage.warning("最多可选择5支股票！");
      return false;
    }
  }
  defaultData.gupiaoData[a].isCheck = !defaultData.gupiaoData[a].isCheck
}

// 回测后的数值输出处理
function aDataz(val, suffix) {
  //console.log(val);
  if (val == 0 || val) {
    var newVal = Number(val).toFixed(2);
    if (suffix) {
      newVal = newVal + '%';
    }
    return newVal;
  } else {
    return '— —';
  }
}
function noValue(item) {
  if (item.value == "" || isNaN(Number(item.value))) {
    item.value = 0;
  }
  if (item.value2 == "" || isNaN(Number(item.value2))) {
    item.value2 = 0;
  }
  if (item.n1 == "" || isNaN(Number(item.n1))) {
    item.n1 = 0;
  }
  if (item.n2 == "" || isNaN(Number(item.n2))) {
    item.n2 = 0;
  }
  if (item.n3 == "" || isNaN(Number(item.n3))) {
    item.n3 = 0;
  }

}
function verifyData() {
  closePoup();
  bMoney.value = Number(bMoney.value);
  var str = JSON.stringify(endData);
  if (strategyNames.value.trim() == "") {
    ElMessage.warning("请输入策略名称");
    return false;
  }
  if (stockMarket.value == "") {
    ElMessage.warning("请选择交易所");
    return false;
  }

  // 选股条件
  var xuanguArr = endData.xuangu;
  if (xuanguArr.length == 0) {
    ElMessage.warning("请先添加选股条件");
    panels[1].show = true
    panels[1].err = true
    return false;
  } else {
    xuanguArr.forEach((item, i) => {
      //console.log(item);

      noValue(item);
      item.value = Number(item.value);
    })
  }

  // 买入
  var mairuArr = endData.mairu;
  if (mairuArr.length == 0) {
    ElMessage.warning("请先设置买入条件");
    panels[2].show = true
    panels[2].err = true
    return false;
  } else {
    mairuArr.forEach((item, i) => {
      // console.log(item);
      noValue(item);
      item.value = Number(item.value);
    })
  }

  // 卖出
  var maichuArr = endData.maichu;
  //            if (maichuArr.length == 0) {
  //                ElMessage.warning("请先设置卖出条件");
  //                panels[3].show = true
  //                panels[3].err = true
  //                return false;
  //            }
  maichuArr.forEach((item, i) => {
    // console.log(item);
    noValue(item);
    item.value = Number(item.value);
  })
  // 风险
  var fengxianArr = endData.fengxian;
  //            if (fengxianArr.length == 0) {
  //                ElMessage.warning("请先添加风险指标");
  //                panels[4].show = true
  //                panels[4].err = true
  //                return false;
  //            }
  fengxianArr.forEach((item, i) => {
    // console.log(item);
    noValue(item);
    item.value = Number(item.value);
  })
  // 股票
  var gupiaoArr = endData.gupiao;
  if (gupiaoArr.length == 0) {
    ElMessage.warning("请先添加股票");
    panels[5].show = true
    panels[5].err = true
    return false;
  }

  var totalNum = 0;
  var isNull = false;
  gupiaoArr.forEach((item, i) => {
    // console.log(item);
    // console.log(i);
    item.value = Number(item.value);
    noValue(item);
    if (!item.value) {
      isNull = true;
    }
    totalNum += Number(item.value);
  })
  console.log(totalNum);

  if (isNull) {
    ElMessage.warning("已选股资金分配比例数值不能为空和0");
    return false;
  }
  if (totalNum !== 100) {
    ElMessage.warning("已选股资金分配比例数值加起来不等于100");
    return false;
  }

  return 1;
}
function verifMsg() {
  // if (new Date(time.BeginTime).getTime() < new Date(time.Begin).getTime()) {
  //   time.BeginTime = time.Begin
  // }
  // if (new Date(time.EndTime).getTime() > new Date(time.End).getTime()) {
  //   time.EndTime = time.End
  // }
  let BeginTime = time.BeginTime;
  let EndTime = time.EndTime;
  if (!checkDate(BeginTime)) {
    ElMessage.warning("开始时间不是合法日期！")
    return false;
  }
  if (!checkDate(EndTime)) {
    ElMessage.warning("结束时间不是合法日期！")
    return false;
  }
  if (new Date(BeginTime).getTime() > new Date(EndTime).getTime()) {
    ElMessage.warning("开始时间不能大于结束时间！")
    return false;
  }

  let day = parseInt((new Date(EndTime) - new Date(BeginTime)) / (1000 * 60 * 60 * 24));
  if (day > 180) {
    ElMessage.warning("开始时间与结束时间跨度最大为180天！")
    return false;
  }

  if (bMoney.value == 0 || bMoney.value == "") {
    ElMessage.warning("请录入初始资金！")
    return false;
  }
  return true;
}
function saveData() {
  let str = JSON.stringify(endData);
  let isNum = verifyData();// 判断条件是否已填选完
  if (isNum == 1) SaveCL();
}
async function SaveCL() {
  let isMsg = verifMsg(); // 判断条件是否已填选完
  let data = endData;
  const market = stockMarket.value.map(item => `${item}`).join(',');
  const datas = {
    strategyName: strategyNames.value,
    market,
    "planId": route.query.planId,
    "taskId": route.query.taskId,
    stockSelection: JSON.stringify(data.xuangu),
    buy: JSON.stringify(data.mairu),
    sale: JSON.stringify(data.maichu),
    risk: JSON.stringify(data.fengxian),
    stock: JSON.stringify(data.gupiao),
    strategyType: SeleteType.value, // 股票：0 - // 期货：1
    strategyId: StrategyId.value
  };
  if (!isMsg) return;
  // 添加策略

  const res = await SecuritiesMyStrategyAddPolicy(datas);
  if (res.success) {
    ElMessage.success(res.msg);
    StrategyId.value = res.data.strategyId
    const data2 = {
      "planId": route.query.planId,
      "taskId": route.query.taskId,
      strategyId: res.data.strategyId,
      beginTime: time.BeginTime,
      endTime: time.EndTime,
      beginAmount: bMoney.value,
      funcRate: bRate.value
    }


    // 回测
    // 0:股票  1：期货
    if (!SeleteType.value) {
      const res2 = await SecuritiesMyStrategyStockBackTest(data2);
      if (res2.success) {
        ElMessage.success(res2.msg);
        ShowEcharts(res.data)
        GetAllTrading(res.data)
      } else {
        ElMessage.error(res2.msg)
      }
    } else {
      const res2 = await SecuritiesMyStrategyFutureskBackTest(data2);
      if (res2.success) {
        ElMessage.success(res2.msg)
        ShowEcharts(res.data)
        GetAllTrading(res.data)
      } else {
        ElMessage.error(res2.msg)
      }
    }
    // 请求数据列表
    emitter.emit("GetDataList")
  } else {
    ElMessage.error(res.msg);
  }
}

// 查看折线图
async function ShowEcharts(row) {
  const datas = {
    "planId": route.query.planId,
    "taskId": route.query.taskId,
    strategyId: row.strategyId,
    type: "ALL"
  };
  const res = await SecuritiesMyStrategyGetStrategy(datas);
  if (res.success) {
    const { data } = res;
    nextTick(() => {
      // 表格的表头数据
      hcData.aData = {
        qczj: data?.qczj,   //期初资金
        zzc: data?.zzc,    //总资产
        ljyk: data?.ljyk,   //累计盈亏
        ljsxf: data?.ljsxf,  //累计手续费
        cysy: data?.cysy,   //累计收益率
        nhsy: data?.nhsy,   //年化收益率
        zdhc: data?.zdhc,   //最大回撤率
        pccs: data?.pccs,   //平仓次数
        kccs: data?.kccs,   //开仓次数
        ccje: data?.ccje,   //持仓市值
      }
      // 图标
      const Lcontainer = document.getElementById('Lcontainer');
      const Lcontainers = echarts.init(Lcontainer);
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var html = "";
            for (var i = 0; i < params.length; i++) {
              html = params[i].name + "<br>";
              html += "收益率：" + (params[i].value) + "%";
            }
            return html;
          }
        },
        legend: {
          data: ['策略收益']
        },
        grid: {
          left: '7%',
          right: '7%',
          bottom: '10%',
          containLabel: false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data?.sj?.split(",")
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %'//纵坐标百分比
          }
        },
        series: [
          {
            name: '收益率',
            type: 'line',
            stack: '总量',
            data: data?.syl?.split(",")
          }
        ]
      };
      Lcontainers.setOption(option);
    })
  } else {
    ElMessage.error(res.msg);
    return
  }
}

// 获取全部交易信息
async function GetAllTrading(row) {
  const data = {
    pageIndex: 1,
    pageCount: 1000,
    taskId: route.query.taskId,
    planId: route.query.planId,
    strategyId: row.strategyId,
  };
  const res = await SecuritiesMyStrategyGetAllTrans(data);
  if (res.success) {
    tableData.value = res.data.data
    if (!res?.data?.data?.length) {
      ElMessage("暂无数据");
    }
  } else {
    ElMessage.error(res.msg);
    return
  }

}

async function onDetails(row) {
  BtnStates.value = row.states == '已提交' ? 1 : 0;
  SeleteType.value = row.strategyType == '期货策略' ? 1 : 0;
  const data = {
    strategyId: row.strategyId,
    typeCY: row.strategyType == '期货策略' ? '1' : '0'
  };
  const res = await SecuritiesMyStrategySearchAndUpdateStrategy(data);
  if (res.success) {
    const { data } = res;

    strategyNames.value = data.name
    endData.xuangu = JSON.parse(data.xuangu);
    endData.mairu = JSON.parse(data.mairu);
    endData.maichu = JSON.parse(data.maichu);
    endData.fengxian = JSON.parse(data.fengxian);
    endData.gupiao = eval(data.gupiao);
    stockMarket.value = data.market.split(",");
    bRate.value = data.funcRate;
    bMoney.value = data.strategyMoney;
    time.BeginTime = data.beginTime.split(' ')[0]
    time.EndTime = data.endTime.split(' ')[0];
    time.Begin = data.begin.split(' ')[0];
    time.End = data.end.split(' ')[0];
    StrategyId.value = data.strategyId;
    // openPoup('gupiaoData', '股票池');
    SelectStock()
    // showPoup.show = false;
    nextTick(() => {
      setTimeout(() => {
        ShowEcharts(row)
        GetAllTrading(row)
      }, 0)
    })


  } else {
    ElMessage.error(res.msg);
  }
}


function checkDate(date) {
  return (new Date(date).getDate() == date.substring(date.length - 2));
}

// 判断传过来的name名,获取对应的数据
function getEndName(name) {
  if (name == "xuanguData") {
    return endData.xuangu;
  } else if (name == "mairuData") {
    return endData.mairu;
  } else if (name == "maichuData") {
    return endData.maichu;
  } else if (name == "fengxianData") {
    return endData.fengxian;
  } else if (name == "gupiaoData") {
    return endData.gupiao;
  } else {
    throw "无效name:" + name;
    // return false;
  }
}

/**
 * 输入框对输入数字的处理
 * @param {obj} event js事件对象
 * @param {string|number} a 当前数组子类下标
 * @param {string} name 需要更改的字段name名
 * @param {string|number} type 需要处理的类型，type=1 正数和小数，type=2 正整数，type为空或其他 数字（包含小数、负数）
 * @param {number} max 输入框允许输入的最大值，这里默认是180
 * @returns
 */
function changeNum(event, a, name, type, max = 180, name2) {

  //console.log(event, a, name, type);
  // return false;
  //响应鼠标事件，允许左右方向键移动
  event = window.event || event;
  if (event.keyCode == 37 || event.keyCode == 39) {
    return;
  }
  let val = event.target.value;
  let t = val.charAt(0);
  if (type == 2) {
    val = val.replace(/^|[^\d]+/g, ''); //非正整数都替换为空
    if (Number(val) > max) {
      val = max;
    }
  } else {
    //先把非数字的都替换掉，除了数字和.
    val = val.replace(/[^\d.]/g, "");
    //必须保证第一个为数字而不是.
    val = val.replace(/^\./g, "");
    //保证只有出现一个.而没有多个.
    val = val.replace(/\.{2,}/g, ".");
    //保证.只出现一次，而不能出现两次以上
    val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    // console.log(val);
    if (Number(val) > max) {
      val = max;
    }
    // console.log(Number(val))
    if (type == 1) {
    } else {
      //如果第一位是负号，则允许添加   如果不允许添加负号 可以把这块注释掉
      if (t == '-') {
        val = '-' + val;
      }
    }
  }

  // 此处需要判断 datx[a].suffix 是  4 5 6 时输入的数值转化为整数
  // console.log("类型",defaultData)
  if (val.toString().length >= 10) {
    val = val.toString().substring(0, 10)
  }
  var linReg = /^[0]+$/gi;    //全部都为0
  // console.log(event, obj);
  let datx = getEndName(name);
  // console.log(datx);
  if (name2) {
    if (linReg.test(val)) {
      datx[a].value2 = 0
    } else {
      datx[a].value2 = val;
    }
  } else {
    if (linReg.test(val)) {
      datx[a].value = 0
    } else {
      datx[a].value = val;
    }
  }
}
function changeNum2(event: any, a: any, name: String, type: any, max = 180) {
  // console.log(event, a);
  // return false;
  //响应鼠标事件，允许左右方向键移动
  event = window.event || event;
  if (event.keyCode == 37 || event.keyCode == 39) {
    return;
  }
  var val = event.target.value;
  var t = val.charAt(0);
  if (type == 2) {
    val = val.replace(/^|[^\d]+/g, ''); //非正整数都替换为空
    if (Number(val) > max) {
      val = max;
    }
  } else {
    //先把非数字的都替换掉，除了数字和.
    val = val.replace(/[^\d.]/g, "");
    //必须保证第一个为数字而不是.
    val = val.replace(/^\./g, "");
    //保证只有出现一个.而没有多个.
    val = val.replace(/\.{2,}/g, ".");
    //保证.只出现一次，而不能出现两次以上
    val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    // console.log(val);

    //小数点后最多显示5位
    var len = 5;
    if (/\./.test(val)) {
      var arr = val.split(".");
      if (arr[1].length > len) {
        val = arr[0] + "." + arr[1].substring(0, len)
      }
    }
    if (Number(val) > max) {
      val = max;
    }
    // console.log(Number(val))
    if (type == 1) {

    } else {
      //如果第一位是负号，则允许添加   如果不允许添加负号 可以把这块注释掉
      if (t == '-') {
        val = '-' + val;
      }
    }

  }
  var linReg = /^[0]+$/gi;    //全部都为0
  // console.log(event, obj);
  // let datx = getEndName(name);
  // console.log(datx);

  if (linReg.test(val)) {
    showPoup2[a] = 0
  } else {
    showPoup2[a] = val
  }
}
function Money(event, type, max) {
  var val = event.target.value;
  var t = val.charAt(0);
  if (type == 2) {
    val = val.replace(/^|[^\d]+/g, ''); //非正整数都替换为空
    if (Number(val) > max) {
      val = max;
    }
  } else {
    //先把非数字的都替换掉，除了数字和.
    val = val.replace(/[^\d.]/g, "");
    //必须保证第一个为数字而不是.
    val = val.replace(/^\./g, "");
    //保证只有出现一个.而没有多个.
    val = val.replace(/\.{2,}/g, ".");
    //保证.只出现一次，而不能出现两次以上
    val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    // console.log(val);
    if (Number(val) > max) {
      val = max;
    }
    // console.log(Number(val))
    if (type == 1) {

    } else {
      //如果第一位是负号，则允许添加   如果不允许添加负号 可以把这块注释掉
      if (t == '-') {
        val = '-' + val;
      }
    }

  }
  var linReg = /^[0]+$/gi;    //全部都为0
  // console.log(event, obj);
  // let datx = getEndName(name);
  // console.log(datx);

  if (linReg.test(val)) {
    bMoney.value = 0
  } else {
    bMoney.value = val
  }
}

// 获取日期选择范围
async function getEndTimes(date) {
  const data = qs.stringify({ stockType: date });
  const res = await SecuritiesMyStrategyGetStockPoolMaxTime(data);
  if (res.success) {
    time.Begin = formatTime(new Date(res?.data?.beginTime).getTime(), "YYYY-mm-dd")
    time.End = formatTime(new Date(res?.data?.endTime).getTime(), "YYYY-mm-dd")
  }
}

// 返回退出主页
function BackStrategy() {
  /// 将所有指标改回默认值
  const NdefaData = JSON.parse(JSON.stringify(defaData));
  emitter.emit("BackStrategy");
  endData['xuangu'] = [];
  endData['mairu'] = [];
  endData['maichu'] = [];
  endData['fengxian'] = [];
  endData['gupiao'] = [];
  tableData.value = null;
  StrategyId.value = "";
  time['Begin'] = "";
  time['BeginTime'] = "";
  time['End'] = "";
  time['EndTime'] = "";
  bRate.value = '0';
  bMoney.value = 10000;
  SeleteType.value = 0;
  tabIndex.value = 0;
  strategyNames.value = ""
  stockMarket.value = "";

  defaultData["xuanguData"] = NdefaData["xuanguData"];
  defaultData["mairuData"] = NdefaData["mairuData"];
  defaultData["maichuData"] = NdefaData["maichuData"];
  defaultData["fengxianData"] = NdefaData["fengxianData"];
  defaultData["gupiaoData"] = []
  const Lcontainer = document.getElementById('Lcontainer');
  const Lcontainers = echarts.init(Lcontainer);
  showPoup.show = false;

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var html = "";
        for (var i = 0; i < params.length; i++) {
          html = params[i].name + "<br>";
          html += "收益率：" + (params[i].value) + "%";
        }
        return html;
      }
    },
    legend: {
      data: ['策略收益']
    },
    grid: {
      left: '7%',
      right: '7%',
      bottom: '10%',
      containLabel: false
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value} %'//纵坐标百分比
      }
    },
    series: [
      {
        name: '收益率',
        type: 'line',
        stack: '总量',
        data: []
      }
    ]
  };
  Lcontainers.setOption(option);
  BtnStates.value = 0;

  hcData.aData = {
    qczj: '',   //期初资金
    zzc: '',    //总资产
    ljyk: '',   //累计盈亏
    ljsxf: '',  //累计手续费
    cysy: '',   //累计收益率
    nhsy: '',   //年化收益率
    zdhc: '',   //最大回撤率
    pccs: '',   //平仓次数
    kccs: '',   //开仓次数
    ccje: '',   //持仓市值
  }


}

const selectArrs = computed(() => {
  var arr1 = [], arr2 = [], arr3 = [], arr4 = [];
  endData.forEach((item, index) => {
    item.data.forEach((a, i) => {
      if (a.type == 1) {
        arr1.push(a.term)
      } if (a.type == 2) {
        arr2.push(a.term)
      } if (a.type == 3) {
        arr3.push(a.rather)
      } else if (a.type == 4) {
        arr4.push(a.term)
      }
    });
  });
  return { arr1, arr2, arr3, arr4 };
});

const isTitle = computed(() => {
  return SeleteType.value ? '期货' : '股票'
})

const prop = defineProps(['SeleteType']);
watch(prop, (newval) => {
  if (newval.SeleteType === 0 || newval.SeleteType === 1) {
    getEndTimes(newval.SeleteType)
    SeleteType.value = newval.SeleteType
  }
}, { immediate: true })

watch(endData, (newVal) => {
  newVal.xuangu.forEach(item => {
    let arr = item.ids.split('-');
    defaultData.xuanguData[arr[0]].item[arr[1]].item[arr[2]].enable = false;
  });
  newVal.mairu.forEach(item => {
    let arr = item.ids.split('-');
    defaultData.mairuData[arr[0]].item[arr[1]].item[arr[2]].enable = false;
  });
  newVal.maichu.forEach(item => {
    let arr = item.ids.split('-');
    defaultData.maichuData[arr[0]].item[arr[1]].item[arr[2]].enable = false;
  });
  newVal.fengxian.forEach(item => {
    let arr = item.ids.split('-');
    defaultData.fengxianData[arr[0]].item[arr[1]].item[arr[2]].enable = false;
  });
}, { deep: true })

onBeforeUnmount(() => {
  emitter.off("GetDataList")
})

defineExpose({
  onDetails
})

</script>

<template>
  <section class="kk-main" id="kk-main">
    <div class="k-ltx">
      <div class="cont-title">
        <button class="kbtn-back" @click="BackStrategy()" title="返回列表">返回</button>
        <!-- <%--<button class="kbtn-save" title="保存策略" onclick="SaveCL(0)">保存策略</button>
          <font style="color:Red;">&nbsp;&nbsp;&nbsp;&nbsp;注：保存策略会更新运行回测结果</font>--%> -->
      </div>
      <div class="cont-container">
        <div class="k-contz">
          <div class="k-tlex">
            {{ SeleteType ? '' : '股票池：沪深300' }}
          </div>
          <div class="k-item">
            <span>策略名称</span>
            <el-input type="text" style="width: 200px" v-model.trim="strategyNames" maxlength="20" />
          </div>
          <div class="k-item">
            <span>交易所</span>
            <el-select v-model="stockMarket" multiple collapse-tags placeholder="请选择" style="width: 200px"
              v-if="SeleteType">
              <el-option label="上海期货交易所" value="SQ" />
              <el-option label="郑州商品交易所" value="ZS" />
              <el-option label="大连商品交易所" value="DS" />
            </el-select>
            <el-select v-model="stockMarket" multiple collapse-tags placeholder="请选择" style="width: 200px" v-else>
              <el-option label="上海证券交易所" value="sh" />
              <el-option label="深圳证券交易所" value="sz" />
            </el-select>
          </div>
        </div>
        <div class="k-contx" :class="panels[1].show ? 'open' : ''">
          <div class="clc-title relative" :class="panels[1].err ? 'err' : ''" @click="openPanel(1)">
            <span class="bold">选股条件</span>
            <span class="grey-text">您一共可以添加<span class="qualified">10</span>个指标</span>
            <span class="fr-open" :icon="useRenderIcon(EditPen)"></span>
          </div>
          <div class="clc-table-box">
            <div class="tab-content">
              <table class="clc-table table">
                <thead>
                  <tr>
                    <th style="width:35%;text-align:left;">指标名称</th>
                    <th style="width:20%;text-align:left;">选项</th>
                    <th style="width:25%;text-align:left;">值</th>
                    <th style="width:10%;">编辑</th>
                    <th style="width:10%;">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(a, a0) in endData.xuangu" :key="a0"
                    :class="showTitleInfo.ids == a.ids && showTitleInfo.name == 'xuanguData' ? 'focus' : ''"
                    @click="focusOn(a.ids, a.title, 'xuanguData')">
                    <td>
                      <span>{{ a.name }}</span>
                    </td>
                    <td>
                      <select v-model="a.rather">
                        <option v-for="(b, b0) in Compare[a.cType]" :value="b.value">{{ b.name }}
                        </option>
                      </select>
                    </td>
                    <td>
                      <div class="inp1">
                        <input type="text" v-model="a.value" @input="changeNum($event, a0, 'xuanguData', 1, 10000000)">
                        <span class="suffix">{{ a.suffix }}</span>
                      </div>

                    </td>
                    <td>
                      <div class="text-center nulltext">— —</div>
                    </td>
                    <td>
                      <div class="tab-close aa-close" @click="removeChoose(a, a0, 'xuanguData')">
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
              <div class="tab-bot">
                <button class="btnmorez" title="添加条件" @click="openPoup('xuanguData', '股票池指标')">添加</button>
                <button class="btnmorez" title="选择股票" @click="openPoup('gupiaoData', '股票池')">预览{{ SeleteType ? '商品' : '股票'
                }}池</button>
              </div>
            </div>
          </div>
        </div>
        <div class="k-contx" :class="panels[2].show ? 'open' : ''">
          <div class="clc-title relative" :class="panels[2].err ? 'err' : ''" @click="openPanel(2)">
            <span class="bold">买入设置</span>
            <span class="grey-text">买入、卖出一共可以添加<span class="qualified">10</span>个指标</span>
            <span class="fr-open"></span>
          </div>
          <div class="clc-table-box">
            <div class="tab-content">
              <table class="clc-table table">
                <thead>
                  <tr>
                    <th style="width:35%;text-align:left;">指标名称</th>
                    <th style="width:20%;text-align:left;">选项</th>
                    <th style="width:25%;text-align:left;">值</th>
                    <th style="width:10%;">编辑</th>
                    <th style="width:10%;">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(a, a0) in endData.mairu" :key="a0"
                    :class="showTitleInfo.ids == a.ids && showTitleInfo.name == 'mairuData' ? 'focus' : ''"
                    @click="focusOn(a.ids, a.title, 'mairuData')">
                    <td>
                      <span>{{ a.name }}</span>
                    </td>
                    <td>
                      <select v-model="a.rather" @change="selectChange(a, a0, 'mairuData')">
                        <option v-for="(b, b0) in Compare[a.cType]"
                          :selected="a.rather == '' && b0 == 0 ? 'selected' : ''" :value="b.value">
                          {{ b.name }}
                        </option>
                      </select>
                    </td>
                    <td>
                      <div class="inp1 inp2" v-if="a.rather == 3 || a.rather == 6">
                        <input type="text" v-model="a.value" @input="changeNum($event, a0, 'mairuData', 1, 10000000)">-
                        <input type="text" v-model="a.value2"
                          @input="changeNum($event, a0, 'mairuData', 1, 10000000, 'value2')">
                        <span class="suffix">{{ a.suffix }}</span>
                      </div>
                      <div class=" nulltext" style="padding-left: 5px;"
                        v-else-if="a.rather == 7 || a.rather == 8 || a.rather == 9 || a.rather == 10 || a.rather == 11 || a.rather == 12">
                        — —</div>
                      <div class="inp1" v-else>
                        <input type="text" v-model="a.value" @input="changeNum($event, a0, 'mairuData', 1, 10000000)">
                        <span class="suffix">{{ a.suffix }}</span>
                      </div>

                    </td>
                    <td>
                      <template v-if="a.edit">
                        <div class="text-center nulledit" v-if="a.name == 'N日涨幅'">
                          <span @click="openPoup2(a, a0, 'mairuData', 1)"></span>
                        </div>
                        <template v-else-if="a.cType == 4">
                          <div class="text-center nulledit"
                            v-if="a.rather == 7 || a.rather == 8 || a.rather == 9 || a.rather == 10">
                            <span @click="openPoup2(a, a0, 'mairuData', 2)"></span>
                          </div>
                          <div class="text-center nulledit" v-else>
                            <span @click="openPoup2(a, a0, 'mairuData', '2-1')"></span>
                          </div>
                        </template>
                        <template v-else-if="a.name == '布林上线' || a.name == '布林下线'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'mairuData', '3')"></span>
                          </div>
                        </template>
                        <template
                          v-else-if="a.name == 'KDJ' || a.name == 'KDJ_K' || a.name == 'KDJ_D' || a.name == 'KDJ_J'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'mairuData', '4')"></span>
                          </div>
                        </template>
                        <template v-else-if="a.name == 'DIF' || a.name == 'DEA' || a.name == 'HISF'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'mairuData', '5')"></span>
                          </div>
                        </template>
                        <template v-else-if="a.name == 'MACD'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'mairuData', '5-1')"></span>
                          </div>
                        </template>
                        <template v-else>
                          <div class="text-center nulledit"
                            v-if="a.rather == 7 || a.rather == 8 || a.rather == 9 || a.rather == 10">
                            <span @click="openPoup2(a, a0, 'mairuData', 2)"></span>
                          </div>
                          <div class="text-center nulledit" v-else>
                            <span @click="openPoup2(a, a0, null, null)"></span>
                          </div>

                        </template>

                      </template>
                      <div class="text-center nulltext" v-else>— —</div>
                    </td>
                    <td>
                      <div class="tab-close aa-close" @click="removeChoose(a, a0, 'mairuData')">
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
              <div class="tab-bot">
                <button class="btnmorez" title="添加条件" @click="openPoup('mairuData', '买入设置指标')">添加</button>
                <!-- <button class="btnshowz">预览股票池</button> -->
              </div>
            </div>
          </div>
        </div>
        <div class="k-contx" :class="panels[3].show ? 'open' : ''">
          <div class="clc-title relative" :class="panels[3].err ? 'err' : ''" @click="openPanel(3)">
            <span class="bold">卖出设置</span>
            <span class="grey-text">买入、卖出一共可以添加<span class="qualified">10</span>个指标</span>
            <span class="fr-open"></span>
          </div>
          <div class="clc-table-box">
            <div class="tab-content">
              <table class="clc-table table">
                <thead>
                  <tr>
                    <th style="width:35%;text-align:left;">指标名称</th>
                    <th style="width:20%;text-align:left;">选项</th>
                    <th style="width:25%;text-align:left;">值</th>
                    <th style="width:10%;">编辑</th>
                    <th style="width:10%;">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(a, a0) in endData.maichu" :key="a0"
                    :class="showTitleInfo.ids == a.ids && showTitleInfo.name == 'maichuData' ? 'focus' : ''"
                    @click="focusOn(a.ids, a.title, 'maichuData')">
                    <td>
                      <span>{{ a.name }}</span>
                    </td>
                    <td>
                      <select v-model="a.rather" @change="selectChange(a, a0, 'maichuData')">
                        <option v-for="(b, b0) in Compare[a.cType]"
                          :selected="a.rather == '' && b0 == 0 ? 'selected' : ''" :value="b.value">
                          {{ b.name }}
                        </option>
                      </select>
                    </td>
                    <td>
                      <div class="inp1 inp2" v-if="a.rather == 3 || a.rather == 6">
                        <input type="text" v-model="a.value" @input="changeNum($event, a0, 'maichuData', 1, 10000000)">-
                        <input type="text" v-model="a.value2"
                          @input="changeNum($event, a0, 'maichuData', 1, 10000000, 'value2')">
                        <span class="suffix">{{ a.suffix }}</span>
                      </div>
                      <div class=" nulltext" style="padding-left: 5px;"
                        v-else-if="a.rather == 7 || a.rather == 8 || a.rather == 9 || a.rather == 10 || a.rather == 11 || a.rather == 12">
                        — —</div>
                      <div class="inp1" v-else>
                        <input type="text" v-model="a.value" @input="changeNum($event, a0, 'maichuData', 1, 10000000)">
                        <span class="suffix">{{ a.suffix }}</span>
                      </div>

                    </td>
                    <td>
                      <template v-if="a.edit">
                        <div class="text-center nulledit" v-if="a.name == 'N日涨幅'">
                          <span @click="openPoup2(a, a0, 'maichuData', 1)"></span>
                        </div>
                        <template v-else-if="a.cType == 4">
                          <div class="text-center nulledit"
                            v-if="a.rather == 7 || a.rather == 8 || a.rather == 9 || a.rather == 10">
                            <span @click="openPoup2(a, a0, 'maichuData', 2)"></span>
                          </div>
                          <div class="text-center nulledit" v-else>
                            <span @click="openPoup2(a, a0, 'maichuData', '2-1')"></span>
                          </div>
                        </template>
                        <template v-else-if="a.name == '布林上线' || a.name == '布林下线'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'maichuData', '3')"></span>
                          </div>
                        </template>
                        <template
                          v-else-if="a.name == 'KDJ' || a.name == 'KDJ_K' || a.name == 'KDJ_D' || a.name == 'KDJ_J'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'maichuData', '4')"></span>
                          </div>
                        </template>
                        <template v-else-if="a.name == 'DIF' || a.name == 'DEA' || a.name == 'HISF'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'maichuData', '5')"></span>
                          </div>
                        </template>
                        <template v-else-if="a.name == 'MACD'">
                          <div class="text-center nulledit">
                            <span @click="openPoup2(a, a0, 'maichuData', '5-1')"></span>
                          </div>
                        </template>
                        <template v-else>
                          <div class="text-center nulledit"
                            v-if="a.rather == 7 || a.rather == 8 || a.rather == 9 || a.rather == 10">
                            <span @click="openPoup2(a, a0, 'maichuData', 2)"></span>
                          </div>
                          <div class="text-center nulledit" v-else>
                            <span @click="openPoup2(a, a0, null, null)"></span>
                          </div>

                        </template>

                      </template>
                      <div class="text-center nulltext" v-else>— —</div>
                    </td>
                    <td>
                      <div class="tab-close aa-close" @click="removeChoose(a, a0, 'maichuData')">
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
              <div class="tab-bot">
                <button class="btnmorez" title="添加条件" @click="openPoup('maichuData', '卖出设置指标')">添加</button>
                <!-- <button class="btnshowz">预览股票池</button> -->
              </div>
            </div>
          </div>
        </div>
        <div class="k-contx" :class="panels[4].show ? 'open' : ''">
          <div class="clc-title relative" :class="panels[4].err ? 'err' : ''" @click="openPanel(4)">
            <span class="bold">风险控制</span>
            <span class="grey-text">您一共可以添加<span class="qualified">10</span>个指标</span>
            <span class="fr-open"></span>
          </div>
          <div class="clc-table-box">
            <div class="tab-content">
              <table class="clc-table table">
                <thead>
                  <tr>
                    <th style="width:35%;text-align:left;">指标名称</th>
                    <th style="width:20%;text-align:left;">选项</th>
                    <th style="width:25%;text-align:left;">值</th>
                    <th style="width:10%;">编辑</th>
                    <th style="width:10%;">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(a, a0) in endData.fengxian" :key="a0"
                    :class="showTitleInfo.ids == a.ids && showTitleInfo.name == 'fengxianData' ? 'focus' : ''"
                    @click="focusOn(a.ids, a.title, 'fengxianData')">
                    <td>
                      <span>{{ a.name }}</span>
                    </td>
                    <td>
                      <div class="nulltext" v-if="a.cType == 0">— —</div>
                      <select v-else v-model="a.rather" @change="selectChange(a, a0, 'fengxianData')">
                        <option v-for="(b, b0) in Compare[a.cType]"
                          :selected="a.rather == '' && b0 == 0 ? 'selected' : ''" :value="b.value">
                          {{ b.name }}
                        </option>
                      </select>
                    </td>
                    <td>
                      <div class="inp1 inp2" v-if="a.rather == 3 || a.rather == 6">
                        <input type="text" v-model="a.value1"
                          @input="changeNum($event, a0, 'fengxianData', 1, 10000000)">-
                        <input type="text" v-model="a.value2" @input="changeNum($event, a0, 'fengxianData', 1, 10000000)">
                        <span class="suffix">{{ a.suffix }}</span>
                      </div>
                      <div class="inp1" v-else>
                        <input type="text" v-model="a.value" @input="changeNum($event, a0, 'fengxianData', 1, 100)">
                        <span class="suffix">{{ a.suffix }}</span>
                      </div>

                    </td>
                    <td>
                      <div class="text-center nulltext">— —</div>
                    </td>
                    <td>
                      <div class="tab-close aa-close" @click="removeChoose(a, a0, 'fengxianData')">
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
              <div class="tab-bot">
                <button class="btnmorez" title="添加条件" @click="openPoup('fengxianData', '风险控制指标')">添加</button>
                <!-- <button class="btnshowz">预览股票池</button> -->
              </div>
            </div>
          </div>
        </div>
        <div class="k-contx" :class="panels[5].show ? '' : 'open'">
          <div class="clc-title relative" :class="panels[5].err ? 'err' : ''" @click="openPanel(5)">
            <span class="bold">{{ isTitle }}选择</span>
            <span class="grey-text">您最多可以添加<span class="qualified">5</span>支{{ isTitle }}</span>
            <span class="fr-open"></span>
          </div>
          <div class="clc-table-box">
            <div class="tab-content">
              <table class="clc-table table">
                <thead>
                  <tr>
                    <th style="width:35%;text-align:left;">{{ isTitle }}名称</th>
                    <th style="width:20%;text-align:left;">选项</th>
                    <th style="width:25%;text-align:left;">值</th>
                    <th style="width:10%;">编辑</th>
                    <th style="width:10%;">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(a, a0) in endData.gupiao" :key="a0">
                    <td>
                      <span>{{ a.name }}</span>
                    </td>
                    <td>
                      <div class="nulltext">— —</div>
                    </td>
                    <td>
                      <div class="inp1">
                        <input type="text" v-model="a.value" @input="changeNum($event, a0, 'gupiaoData', 2, 100)"
                          maxlength="8" onkeyup="value=value.replace(/\D/g,'')">
                        <span class="suffix">%</span>
                      </div>
                    </td>
                    <td>
                      <div class="text-center nulltext">— —</div>
                    </td>
                    <td>
                      <div class="tab-close aa-close" @click="removeChoose(a, a0, 'gupiaoData')">
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
              <div class="tab-bot" v-if="false">
                <button class="btnmorez" title="添加条件"
                  @click="openPoup('gupiaoData', SeleteType ? '商品池' : '股票池')">选择股票</button>
                <!-- <button class="btnshowz">预览股票池</button> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cont-foot" style="display:none;">
        <div class="cont-foottop" @click="showTitleInfo.show = !showTitleInfo.show"><span
            :class="showTitleInfo.show ? '' : 'hid'"></span></div>
        <div class="cont-foottext" v-show="showTitleInfo.show">
          {{ showTitleInfo.text }}
        </div>
      </div>
    </div>
    <div class="k-blank"></div>
    <div class="k-gtx">
      <div class="cont-title cont-t2">
        <div class="lx">
          <input type="date" v-model="time.BeginTime" placeholder="开始时间" :min="time.Begin" :max="time.End">至
          <input type="date" v-model="time.EndTime" placeholder="结束时间" :min="time.Begin" :max="time.End">
          <div class="mone">
            <span>￥</span>
            <input type="text" v-model="bMoney" @input="Money($event, 2, '100000000')" placeholder="初始金额">
          </div>
          <div class="pine">
            <span>频率</span>
            <select v-model="bRate">
              <option value="0">日</option>
              <option value="1">周</option>
              <option value="2">月</option>
            </select>
          </div>
        </div>
        <div class="gx">
          <!-- <button class="kbtn-back" title="返回列表">返回</button> -->
          <el-button class="kbtn-save" title="运行回测" @click="saveData()" v-if="!BtnStates">运行回测并保存</el-button>
        </div>
      </div>
      <div class="cont-container2">
        <div class="cont-info1 over-auto">
          <table class="con-table">
            <thead>
              <tr>
                <th>期初资金</th>
                <th>总资产</th>
                <th>累计盈亏</th>
                <th>累计手续费</th>
                <th>累计收益率</th>
                <th>年化收益率</th>
                <th>最大回撤率</th>
                <th>平仓次数</th>
                <th>开仓次数</th>
                <th>持仓市值</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span id="qczj" :title="aDataz(hcData.aData.qczj, undefined)">{{ aDataz(hcData.aData.qczj, undefined)
                }}</span></td>
                <td><span id="zzc" :title="aDataz(hcData.aData.zzc, undefined)">{{ aDataz(hcData.aData.zzc, undefined)
                }}</span></td>
                <td><span id="ljyk" :title="aDataz(hcData.aData.ljyk, undefined)">{{ aDataz(hcData.aData.ljyk, undefined)
                }}</span></td>
                <td><span id="ljsxf" :title="aDataz(hcData.aData.ljsxf, undefined)">{{ aDataz(hcData.aData.ljsxf,
                  undefined) }}</span></td>
                <td><span id="cysy" :title="aDataz(hcData.aData.cysy, '%')">{{ aDataz(hcData.aData.cysy, "%") }}</span>
                </td>
                <td><span id="nhsy" :title="aDataz(hcData.aData.nhsy, '%')">{{ aDataz(hcData.aData.nhsy, "%") }}</span>
                </td>
                <td><span id="zdhc" :title="aDataz(hcData.aData.zdhc, '%')">{{ aDataz(hcData.aData.zdhc, "%") }}</span>
                </td>
                <td><span id="pccs" :title="aDataz(hcData.aData.pccs, undefined)">{{ aDataz(hcData.aData.pccs, undefined)
                }}</span></td>
                <td><span id="kccs" :title="aDataz(hcData.aData.kccs, undefined)">{{ aDataz(hcData.aData.kccs, undefined)
                }}</span></td>
                <td><span id="ccje" :title="aDataz(hcData.aData.ccje, undefined)">{{ aDataz(hcData.aData.ccje, undefined)
                }}</span></td>
              </tr>
            </tbody>
          </table>
          <div class="con-chart" style="position:relative;">
            <div class="inText" id="IDinText">点击"运行回测"进行详细的回测</div>
            <div id="Lcontainer" style="width:100%;height:100%;position:absolute;top:0;left:0;max-height:308px;"> </div>
          </div>
        </div>
        <div class="cont-info2 over-auto">
          <el-table :data="tableData" style="width: 100%;max-height:300px;">
            <el-table-column prop="transTime" label="委托时间" />
            <el-table-column prop="stockCode" label="标的" width="70" />
            <el-table-column prop="stockName" label="名称" />
            <el-table-column prop="transType" label="交易类型" width="50">
              <template #default="scope">
                {{ scope.row.transType == '1' ? '卖出' : '买入' }}
              </template>
            </el-table-column>
            <el-table-column prop="transCount" label="成交量" width="50" />
            <el-table-column prop="transPrice" label="成交价" />
            <el-table-column prop="transAmount" label="成交额" />
            <el-table-column prop="strategyProfit" label="盈亏" />
            <el-table-column prop="serviceFee" label="手续费" width="50" />
            <el-table-column prop="accountAmount" label="账户余额" />
            <el-table-column prop="remarks" label="描述" />
          </el-table>
        </div>
        <div class="k-popbox" v-if="showPoup.show">
          <div class="k-poptop">
            <span>{{ SeleteType ? '期货池' : '股票池' }}</span>
            <div class="k-close aa-close" @click="closePoup"></div>
          </div>
          <div class="k-container">
            <div class="k-tabbox" v-if="showPoup.dataName == 'gupiaoData'">
              <div class="gu-info">符合条件的{{ isTitle }}共<span class="red">{{
                defaultData[showPoup.dataName]?.length || 0 }}</span>支
              </div>
              <div class="gu-tablebox" v-if="!SeleteType">
                <table class="gu-table">
                  <thead>
                    <tr>
                      <th>选择</th>
                      <th>股票名称</th>
                      <th>股票代码</th>
                      <th>开盘价</th>
                      <th>收盘价</th>
                      <th>最高价</th>
                      <th>最低价</th>
                      <th>换手率</th>
                      <th>涨跌幅</th>
                      <th>交易量</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(a, a0) in defaultData[showPoup.dataName]" :key="a0" :class="a.isCheck ? 'pik' : ''"
                      @click="trCheck($event, a, a0)">
                      <td>
                        <input type="checkbox" class="inpcheck" v-model="a.isCheck"
                          @click.stop="inputCheck($event, a, a0)">
                      </td>
                      <td>{{ a.stockName }}</td>
                      <td>{{ a.stockCode }}</td>
                      <td>{{ a.openPrice }}</td>
                      <td>{{ a.closePrice }}</td>
                      <td>{{ a.hightPrice }}</td>
                      <td>{{ a.lowPrice }}</td>
                      <td>{{ a.changeRate }}</td>
                      <td>{{ a.riseRate }}</td>
                      <td>{{ a.transNum }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="gu-tablebox" v-else>
                <table class="gu-table">
                  <thead>
                    <tr>
                      <th>选择</th>
                      <th>商品名称</th>
                      <th>商品代码</th>
                      <th>开盘价</th>
                      <th>收盘价</th>
                      <th>最高价</th>
                      <th>最低价</th>
                      <th>涨跌幅</th>
                      <th>交易量</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(a, a0) in defaultData[showPoup.dataName]" :key="a0" :class="a.isCheck ? 'pik' : ''"
                      @click="trCheck($event, a, a0)">
                      <td>
                        <input type="checkbox" class="inpcheck" v-model="a.isCheck"
                          @click.stop="inputCheck($event, a, a0)">
                      </td>
                      <td>{{ a.stockName }}</td>
                      <td>{{ a.stockCode }}</td>
                      <td>{{ a.openPrice }}</td>
                      <td>{{ a.closePrice }}</td>
                      <td>{{ a.hightPrice }}</td>
                      <td>{{ a.lowPrice }}</td>
                      <td>{{ a.riseRate }}</td>
                      <td>{{ a.transNum }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="k-tabbox over-auto" v-else>
              <ul class="k-tul">
                <li v-for="(a, a0) in defaultData[showPoup.dataName]" :key="a0" :class="a0 == tabIndex ? 'active' : ''"
                  :title="a.label.title" @click="toggleTab(a0)">
                  {{ a.label.name }}</li>
              </ul>
              <div class="k-tcont">
                <div class="k-tbox" v-for="(a, a0) in defaultData[showPoup.dataName]" :key="a0"
                  :class="a0 == tabIndex ? 'active' : ''">
                  <div class="btns-itembox" v-for="(b, b0) in a.item" :key="b0">
                    <h4>{{ b.label.name }}<i class="icx" :title="b.label.title">i</i>:
                    </h4>
                    <div class="itemx-box">
                      <div class="itemx" v-for="(c, c0) in b.item" :key="c0">
                        <button @click="btnChoose(c, a0, b0, c0, showPoup.dataName)"
                          :class="c.enable == true ? '' : 'nouse'">{{ c.name }}<i class="icx"
                            :title="c.title">i</i></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="k-kpox" v-if="showPoup2.show">
      <div class="k-kpoxbody">
        <div class="k-kpoxtop">
          {{ showPoup2.text }}条件选择
          <div class="k-kpox-close aa-close" @click="closePoup2(undefined)"></div>
        </div>
        <div class="k-kpoxmid">
          <div class="k-kitem">
            <h4>{{ showPoup2.text }}参数</h4>
            <!-- N日涨幅 type==1 -->
            <template v-if="showPoup2.type == 1">
              <div class="inpx">
                <span>N</span><input v-model="showPoup2.n1" type="text"
                  @input="changeNum2($event, 'n1', showPoup2.dataName, 1, 10000000)">
              </div>
            </template>
            <!-- cType==4的情况 -->
            <template v-if="showPoup2.type == 2">
              <div class="inpx">
                <span>短线</span><input v-model="showPoup2.n1" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n1', showPoup2.dataName, 1, 10000000)">
              </div>
              <div class="inpx">
                <span>长线</span><input v-model="showPoup2.n2" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n2', showPoup2.dataName, 1, 10000000)">
              </div>
            </template>
            <template v-if="showPoup2.type == '2-1'">
              <div class="inpx">
                <span>时间长度</span><input v-model="showPoup2.n1" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n1', showPoup2.dataName, 1, 10000000)">
              </div>
            </template>
            <!-- 布林上线||布林下线 -->
            <template v-if="showPoup2.type == 3">
              <div class="inpx">
                <span>时间长度</span><input v-model="showPoup2.n1" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n1', showPoup2.dataName, 1, 10000000)">
              </div>
              <div class="inpx">
                <span>上线标准差系数</span><input v-model="showPoup2.n2" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n2', showPoup2.dataName, 1, 10000000)">
              </div>
              <div class="inpx">
                <span>下线标准差系数</span><input v-model="showPoup2.n3" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n3', showPoup2.dataName, 1, 10000000)">
              </div>
            </template>
            <!-- a.name=='KDJ'||a.name=='KDJ_K'||a.name=='KDJ_D'||a.name=='KDJ_J' -->
            <template v-if="showPoup2.type == 4">
              <div class="inpx">
                <span>N</span><input v-model="showPoup2.n1" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n1', showPoup2.dataName, 1, 10000000)">
              </div>
              <div class="inpx">
                <span>M1</span><input v-model="showPoup2.n2" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n2', showPoup2.dataName, 1, 10000000)">
              </div>
              <div class="inpx">
                <span>M2</span><input v-model="showPoup2.n3" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n3', showPoup2.dataName, 1, 10000000)">
              </div>
            </template>
            <!-- a.name=='DIF'||a.name=='DEA'||a.name=='HISF' || a.name=='MACD' -->
            <template v-if="showPoup2.type == '5' || showPoup2.type == '5-1'">
              <div class="inpx">
                <span>DIF短线</span><input v-model="showPoup2.n1" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n1', showPoup2.dataName, 1, 10000000)">
              </div>
              <div class="inpx">
                <span>DIF长线</span><input v-model="showPoup2.n2" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n2', showPoup2.dataName, 1, 10000000)">
              </div>
              <div class="inpx" v-if="showPoup2.type == '5-1'">
                <span>DEA</span><input v-model="showPoup2.n3" type="text" :disabled="showPoup2.disable ? true : false"
                  @input="changeNum2($event, 'n3', showPoup2.dataName, 1, 10000000)">
              </div>
            </template>

          </div>
        </div>
        <div class="k-kpoxbot">
          <button class="k-kpox-remove" @click="closePoup2(undefined)">取消</button>
          <button class="k-kpox-refer" @click="closePoup2(1)">确定</button>
        </div>
      </div>
    </div>
    <div class="loading" v-if="false">
      <div class="yuan">
        <span></span>
      </div>
    </div>
  </section>
</template>

<style scoped>
.aa-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  cursor: pointer;
}

.aa-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.aa-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.over-auto {
  overflow: auto;
}

.icx {
  display: inline-block;
  width: 15px;
  height: 15px;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  color: #888;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: default;
}

.kk-main {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.kk-main .k-ltx {
  width: 50%;
  border: 1px solid #e8ecf0;
  display: flex;
  flex-direction: column;
}

.kk-main .k-ltx .cont-container {
  flex: 1;
}

.kk-main .k-ltx .cont-foottop {
  width: 100%;
  height: 12px;
  border-top: 1px solid #e0e6eb;
  overflow: hidden;
}

.kk-main .k-ltx .cont-foottop>span {
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 100%;
  background: url(../images/un_shown.png) no-repeat center;
}

.kk-main .k-ltx .cont-foottop>span.hid {
  transform: rotate(180deg);
}

.kk-main .k-ltx .cont-foottext {
  border-top: 1px solid #e0e6eb;
  padding: 12px 20px;
  height: 100px;
  overflow: auto;
  background: #f7fdff;
}

.kk-main .k-blank {
  width: 12px;
}

.kk-main .k-gtx {
  width: calc(50% - 12px);
  border: 1px solid #e8ecf0;
  display: flex;
  flex-direction: column;
}

.kk-main select,
.kk-main textarea,
.kk-main input[type=text],
.kk-main input[type=password],
.kk-main input[type=datetime],
.kk-main input[type=datetime-local],
.kk-main input[type=date],
.kk-main input[type=month],
.kk-main input[type=time],
.kk-main input[type=week],
.kk-main input[type=number],
.kk-main input[type=email],
.kk-main input[type=url],
.kk-main input[type=search],
.kk-main input[type=tel],
.kk-main input[type=color],
.kk-main .uneditable-input {
  display: inline-block;
  height: 28px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 18px;
  color: #555;
  vertical-align: middle;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.kk-main select,
.kk-main input,
.kk-main input[type=text] {
  color: #00192f;
  margin-bottom: 0 !important;
  border: 1px solid #e8ecf0;
  border-radius: 2px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.kk-main select:focus,
.kk-main input:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #255da8 !important;
}

.cont-title {
  padding: 8px 10px;
  background: #e8ecf0;
}

.cont-title.cont-t2 {
  display: flex;
  justify-content: space-between;
}

.cont-title .lx {
  width: 75%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cont-title .lx .mone {
  position: relative;
  width: 100px;
}

.cont-title .lx .mone>span {
  position: absolute;
  font-weight: bold;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

.cont-title .lx .mone input {
  width: 100%;
  padding-left: 20px;
}

.cont-title button {
  height: 32px;
  line-height: 32px;
  padding: 0 14px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #d9dcdf;
}

.cont-title button+button {
  margin-left: 8px;
}

.cont-title button:hover {
  box-shadow: inset 0 0 4px 1px #060606;
}

.cont-title .kbtn-save {
  color: #fff;
  border: 1px solid #255da8;
  text-shadow: none;
  box-shadow: none;
  background: #255da8;
}

.cont-container {
  width: 100%;
  height: calc(100% - 50px);
  overflow: auto;
  padding: 20px;
}

.cont-container .k-contz {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cont-container .k-contz .k-tlex {
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
  color: #000;
}

.cont-container .k-contz .k-item {
  width: 50%;
  display: flex;
  align-items: center;
}

.cont-container .k-contz .k-item>span {
  display: inline-block;
  margin-right: 8px;
}

.cont-container .k-contx .clc-title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  background: #f3f5f7;
  position: relative;
  padding-right: 30px;
  border: 1px solid transparent;
  font-size: 14px;
}

.cont-container .k-contx .clc-title.err {
  border: 1px solid #fa8a8a;
}

.cont-container .k-contx .clc-title .grey-text {
  color: #868b91;
  font-size: 80%;
  margin-left: 5px;
}

.cont-container .k-contx .clc-title .bold {
  font-weight: bold !important;
}

.cont-container .k-contx .clc-title .fr-open {
  position: absolute;
  top: 0px;
  right: 5px;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background: url(@/assets/studen/images/un_open.png) no-repeat center;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.cont-container .k-contx.open .clc-title .fr-open {
  transform: rotate(90deg);
}

.cont-container .k-contx.open .clc-table-box {
  display: block;
}

.cont-container2 {
  width: 100%;
  flex: 1;
  position: relative;
}

.cont-container2 .k-popbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
}

.cont-container2 .k-popbox .k-poptop {
  height: 50px;
  width: 100%;
  color: #4f5a65;
  line-height: 50px;
  background: #f3f5f7;
  position: relative;
  text-align: center;
}

.cont-container2 .k-popbox .k-poptop span {
  font-size: 20px;
  font-weight: bold;
}

.cont-container2 .k-popbox .k-poptop .k-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  color: #8b8b8b;
}

.cont-container2 .k-popbox .k-poptop .k-close:hover {
  color: #000;
}

.cont-container2 .k-popbox .k-container {
  height: calc(100% - 50px);
}

.cont-container2 .k-popbox .k-container .k-tabbox {
  padding: 10px 20px;
  height: 100%;
}

.cont-container2 .k-popbox .k-container .k-tul {
  display: flex;
  border-bottom: 1px solid #e8ecf0;
}

.cont-container2 .k-popbox .k-container .k-tul li {
  line-height: 34px;
  padding: 0 15px;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.cont-container2 .k-popbox .k-container .k-tul li.active {
  color: #255da8;
  border-bottom-color: #255da8;
}

.cont-container2 .k-popbox .k-container .k-tbox {
  display: none;
}

.cont-container2 .k-popbox .k-container .k-tbox.active {
  display: block;
}

.btns-itembox {
  padding: 15px 0 13px;
  border-bottom: 1px solid #e8ecf0;
}

.btns-itembox>h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: #000;
}

.btns-itembox>h4 .icx {
  margin-left: 3px;
}

.btns-itembox .itemx-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.btns-itembox .itemx-box .itemx {
  width: 25%;
  padding: 8px 15px;
}

.btns-itembox .itemx-box .itemx button {
  width: 100%;
  padding: 5px 5px;
  padding-right: 20px;
  position: relative;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #f3f5f7;
  border-radius: 3px;
  font-size: 14px;
}

.btns-itembox .itemx-box .itemx button .icx {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.btns-itembox .itemx-box .itemx button:hover {
  background-color: #efefef;
}

.btns-itembox .itemx-box .itemx button.nouse {
  color: #bbb;
}

.btns-itembox .itemx-box .itemx button.nouse .icx {
  color: #bbb;
}

.clc-table-box {
  display: none;
}

.clc-table {
  width: 100%;
}

.clc-table thead tr th {
  padding: 10px 5px;
  font-size: 14px;
}

.clc-table tbody tr:hover {
  background: #eef3f9;
}

.clc-table tbody tr.focus {
  background: #eef3f9;
  border: 1px solid #92aed3;
}

.clc-table tbody tr td {
  padding: 5px;
  font-size: 14px;
}

.clc-table .tab-close {
  position: relative;
  margin: 0 auto;
  background: #eee;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #888;
}

.clc-table .tab-close::before,
.clc-table .tab-close::after {
  width: 50%;
}

.clc-table .tab-close:hover {
  color: #333;
  background-color: #c5c8d2;
}

.clc-table .nulltext {
  color: #888;
}

.clc-table .nulledit span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/un_edit.png) no-repeat;
  cursor: pointer;
}

.clc-table .inp1 input {
  width: 80px;
}

.clc-table .inp1 .suffix {
  margin-left: 5px;
}

.clc-table .inp2 input {
  width: 50px;
}

.k-contx {
  margin: 15px 0;
}

.k-contx .tab-bot {
  margin-top: 10px;
}

.k-contx .tab-bot button {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  margin: 0 5px;
  font: inherit;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  font-family: inherit;
  font-weight: 400;
  white-space: nowrap;
  touch-action: manipulation;
  outline: 0;
  user-select: none;
  text-shadow: none;
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #fff;
  font-size: 14px;
  border-radius: 2px;
  background: #5e789b;
  border: 0;
  cursor: pointer;
}

.k-contx .tab-bot button+button {
  margin-left: 10px;
}

.k-kpox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.24);
  z-index: 110;
}

.k-kpox .k-kpoxbody {
  width: 500px;
  margin: 0 auto;
  margin-top: 10%;
  background-color: #fff;
}

.k-kpox .k-kpoxbody .k-kpoxtop {
  background-color: #e8ecf0;
  position: relative;
  padding: 10px 40px 10px 10px;
  font-size: 16px;
  font-weight: bold;
  color: #777;
}

.k-kpox .k-kpoxbody .k-kpoxtop .k-kpox-close {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

.k-kpox .k-kpoxbody .k-kpoxmid {
  min-height: 200px;
  padding: 10px;
}

.k-kpox .k-kpoxbody .k-kpoxbot {
  padding: 10px;
  text-align: center;
  border-top: 1px solid #eee;
}

.k-kpox .k-kpoxbody .k-kpoxbot button {
  margin: 0 5px;
  padding: 0 10px;
  min-width: 65px;
  height: 30px;
  letter-spacing: 1px;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.k-kpox .k-kpoxbody .k-kpoxbot button:hover {
  background-color: #eee;
}

.k-kpox .k-kpoxbody .k-kpoxbot .k-kpox-refer {
  border-color: #4890c8;
  background: #4890c8;
  color: #fff;
}

.k-kpox .k-kpoxbody .k-kpoxbot .k-kpox-refer:hover {
  background-color: #337ab7;
}

.k-kpox .k-kpoxbody .k-kitem {
  margin: 10px;
}

.k-kpox .k-kpoxbody .k-kitem>h4 {
  margin-bottom: 8px;
}

.k-kpox .k-kpoxbody .k-kitem .inpx {
  margin-bottom: 10px;
}

.k-kpox .k-kpoxbody .k-kitem .inpx span {
  min-width: 60px;
  display: inline-block;
  margin-right: 8px;
}

.k-kpox .k-kpoxbody .k-kitem .inpx input {
  width: 120px;
}

.red {
  color: #f00;
}

.gu-info {
  margin-bottom: 10px;
  color: #777;
}

.gu-info span {
  margin: 0 3px;
}

.gu-tablebox {
  height: calc(100% - 30px);
  position: relative;
  overflow: auto;
}

.gu-tablebox .gu-table {
  width: 100%;
}

.gu-tablebox .gu-table thead {
  background-color: #f3f5f7;
  position: sticky;
  top: 0;
  left: 0;
}

.gu-tablebox .gu-table thead th {
  padding: 7px;
  font-size: 14px;
}

.gu-tablebox .gu-table thead th:nth-child(1) {
  width: 10%;
}

.gu-tablebox .gu-table thead th:nth-child(2) {
  width: 20%;
}

.gu-tablebox .gu-table thead th:nth-child(3) {
  width: 20%;
}

.gu-tablebox .gu-table thead th:nth-child(4) {
  width: 10%;
}

.gu-tablebox .gu-table thead th:nth-child(5) {
  width: 10%;
}

.gu-tablebox .gu-table thead th:nth-child(6) {
  width: 15%;
}

.gu-tablebox .gu-table thead th:nth-child(7) {
  width: 15%;
}

.gu-tablebox .gu-table tbody tr {
  background-color: #fff;
}

.gu-tablebox .gu-table tbody tr:nth-child(2n) {
  background-color: #f9f9f9;
}

.gu-tablebox .gu-table tbody tr.pik,
.gu-tablebox .gu-table tbody tr:hover {
  background-color: #e8ecf0;
}

.gu-tablebox .gu-table tbody tr td {
  text-align: center;
  padding: 8px;
  font-size: 14px;
}

.gu-tablebox .gu-table .inpcheck {
  cursor: pointer;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.cont-info1 {
  width: 100%;
  height: 55%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.cont-info1 .con-table {
  width: 100%;
}

.cont-info1 .con-table thead th,
.cont-info1 .con-table tbody td {
  border: 1px solid #c8c8c8;
}

.cont-info1 .con-table thead th {
  padding: 3px 0;
  font-size: 14px;
}

.cont-info1 .con-table tbody td {
  padding: 3px 0;
  text-align: center;
  color: #777;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.cont-info1 .con-chart {
  flex: 1;
  width: 100%;
  height: 100%;
}

.cont-info1 .con-chart .inText {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #c0c3c4;
  font-size: 16px;
  letter-spacing: 1px;
}

.cont-info2 {
  width: 100%;
  height: 45%;
  border-top: 1px solid #e8ecf0;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.loading .yuan {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading .yuan>span {
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-left: 0;
  border-top: 0;
  border-radius: 50%;
  animation: ani-zhuan 1.2s linear infinite;
}

@keyframes ani-zhuan {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ----------------------------- */
:deep(.el-table .el-table__cell) {
  padding: 2px 0;
}

:deep(.el-table .cell) {
  font-size: 12px;
}

:deep(.el-table__body-wrapper) {
  background-color: #efefef;
}
</style>
